<template>
  <span>我叫{{ modelValue }}，今年{{ age }}岁</span> <a-button  @click="changeInfo">更新</a-button>
  <div style="padding:15px 0;"><hr /></div>
  <h2>ref子组件实例和defineExpose</h2>
  <div>
    {{refState.nickName}}
    <!-- <a-button @click="changeRefName">updateName</a-button> -->
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
defineProps({
  modelValue: String,
  age: Number
})
const emit = defineEmits(['update:modelValue', 'update:age'])

const changeInfo = () => {
  // 触发父组件值更新
  emit('update:modelValue', 'Tom')
  emit('update:age', 30)
}

// 二
const refState = reactive({
  nickName: 'test'
})

defineExpose({
  // refState
  ...toRefs(refState),
  // 声明方法
  changeRefName () {
    refState.nickName = 'tets change'
  }
})
</script>
